@extends('dashboard.includes.master')
@section('css')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@endsection
@section('title')
Add New Contacts
@endsection

@section('content')

<div class="container">
    <h2 class="mb-4">Add New Contact</h2>

    <!-- Trigger Modal -->
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#insertMethodModal">
        Choose Insertion Way
    </button>

    <!-- Modal -->
    <div class="modal fade" id="insertMethodModal" tabindex="-1" aria-labelledby="insertMethodLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
                </div>
                <div class="modal-body d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary" onclick="showSection('manual')">Insert
                        Manual</button>
                    <button type="button" class="btn btn-outline-secondary" onclick="showSection('database')">Choose
                        From Database</button>
                    <button type="button" class="btn btn-outline-success" onclick="showSection('excel')">Upload Excel
                        File</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Manual Input Form -->
    <div id="manualSection" class="mt-4 d-none">

        <h4>Add New Contact Manual</h4>
        <div class="card-body">
            <!-- Container for Dynamic Forms -->
            <form action="{{ route('contacts.store') }}" method="POST" id="mainForm">
                <input type="hidden" name="group_id" id="group_id" value="{{$groups->id}}" />
                @csrf
                <div id="formContainer" class="mt-4">
                    <!-- Initial Form -->
                    <div class="form-group phone-form">
                        <div class="row">
                            <div class="mb-3 col-6">
                                <label for="name" class="form-label">Phone</label>
                                <input class="form-control" type="text" name="phone[]"
                                    placeholder="019273874 or +01773567353">
                                @if($errors->has('phone'))
                                <div class="error">{{ $errors->first('phone') }}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Buttons -->
                <div class="buttons d-flex gap-2 mt-2">
                    <button type="button" class="btn btn-success btn-sm" id="newPhone">New Phone</button>
                    <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Select from Database -->
    <div id="databaseSection" class="mt-4 d-none">
        <h4>Choose From Database</h4>
        <form action="{{ route('contacts.store.database') }}" method="POST">
            <input type="hidden" name="group_id" id="group_id" value="{{$groups->id}}" />
            @csrf
            <label class="form-label">Choose....</label>
            <select name="contact_ids[]" class="form-select" multiple>
                @foreach($phonesExcel as $excel)
                <option value="{{ $excel->id }}">{{ $excel->phone }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-secondary mt-2">Save</button>
        </form>
    </div>


    <!-- Upload Excel -->
    <div id="excelSection" class="mt-4 d-none">
        <h4>Upload Excel File</h4>
        <form action="{{ route('contacts.store.excel') }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="group_id" id="group_id" value="{{$groups->id}}" />
            @csrf
            <div class="form-group">
                <div class="row">
                    <div class="mb-3">
                        <label for="file" class="form-label">Upload Excel File</label>
                        <input class="form-control @error('file') is-invalid @enderror" type="file" id="file"
                            name="file[]" accept=".xlsx, .xls" multiple required>
                        @error('file')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-success mt-2">Upload</button>
        </form>
    </div>
</div>
@endsection

@section('js')

<script>
function showSection(section) {
    // إخفاء كل الأقسام
    ['manualSection', 'databaseSection', 'excelSection'].forEach(id => {
        document.getElementById(id).classList.add('d-none');
    });

    // إظهار القسم المحدد
    document.getElementById(section + 'Section').classList.remove('d-none');

    // إغلاق المودال يدوياً باستخدام Event بدلاً من getInstance
    const modalEl = document.getElementById('insertMethodModal');
    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    modal.hide();

    // إزالة الطبقة السوداء يدويًا في حال لم تُزال
    document.body.classList.remove('modal-open');
    const backdrops = document.getElementsByClassName('modal-backdrop');
    while (backdrops.length > 0) {
        backdrops[0].parentNode.removeChild(backdrops[0]);
    }
}
</script>

<script>
document.getElementById('newPhone').addEventListener('click', function() {
    let formContainer = document.getElementById('formContainer');
    let newForm = document.querySelector('.phone-form').cloneNode(true);

    // Clear input fields in the cloned form
    let inputs = newForm.querySelectorAll('input');
    inputs.forEach(input => input.value = '');

    formContainer.appendChild(newForm);
});
</script>

@endsection